<!--
 * @Author: luoyuxiang 398165@qq.com
 * @Date: 2025-03-15 20:00:37
 * @LastEditors: luoyuxiang 398165@qq.com
 * @LastEditTime: 2025-03-25 20:02:23
 * @FilePath: \formula-syn-vue\src\views\project\topic-article\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <ArticleTemplate
      :show_checkbox="false"
      :topicId="topicId"
      ref="articleTemplateRef"
      selected="article_topic"
      :page_index="1"
      :page_size="10"
      @selection-change="handleSelectionChange"
    >
      <template #button>
        <div class="mb-10px">
          <el-button
            v-hasPerm="['project:topicArticle:add']"
            type="success"
            @click="handleOpenDialog()"
          >
            <template #icon><Plus /></template>
            新增
          </el-button>
          <el-button
            v-hasPerm="['project:topicArticle:delete']"
            type="danger"
            :disabled="removeIds.length === 0"
            @click="handleDelete()"
          >
            <template #icon><Delete /></template>
            删除
          </el-button>
        </div>
      </template>
      <template #operation>
        <el-table-column fixed="right" label="操作" width="220">
          <template #default="scope">
            <el-button
              v-hasPerm="['project:topicArticle:delete']"
              type="danger"
              size="small"
              link
              @click="handleDelete(scope.row.id)"
            >
              <template #icon><Delete /></template>
              删除
            </el-button>
            <el-button
              v-hasPerm="['project:tcm:query']"
              type="primary"
              size="small"
              link
              @click="handleTcmQuery(scope.row.articleId, scope.row.titleCn)"
            >
              <template #icon><Edit /></template>
              处方
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ArticleTemplate>
    <ArticleAdd :topicId="topicId" :topicTitle="topicTitle" ref="topicRef" @onQuery="handleQuery" />
    <ArticleTcm
      :articleId="articleId"
      :articleTitle="articleTitle"
      :topicId="topicId"
      @onQuery="handleQuery"
      ref="articleTcmRef"
    />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "TopicArticle",
  inheritAttrs: false,
});

import TopicArticleAPI, {
  TopicArticlePageVO,
  TopicArticleForm,
  TopicArticlePageQuery,
} from "@/api/project/topic-article";

import ArticleTemplate from "../components/ArticleTemplate.vue";
import ArticleAdd from "../components/ArticleAdd.vue";
import ArticleTcm from "../components/ArticleTcm.vue";

const dataFormRef = ref(ElForm);

const loading = ref(false);
const removeIds = ref<number[]>([]);
const total = ref(0);
const topicRef = ref();

// 获取路由参数
const route = useRoute();
const topicId = ref(route.query.id as string);
const topicTitle = ref(route.query.title as string);

// 弹窗
const dialog = reactive({
  title: "",
  visible: false,
});

/** 处方查询 */
let articleId = ref(0);
let articleTitle = ref("");
const articleTcmRef = ref();

// 选题文章表单校验规则
const rules = reactive({});
const articleTemplateRef = ref();
/** 查询选题文章 */
function handleQuery() {
  articleTemplateRef.value.handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/** 打开选题文章弹窗 */
function handleOpenDialog() {
  topicRef.value.openShowDialog(topicId.value, topicTitle.value);
}

/** 删除选题文章 */
function handleDelete(id?: number) {
  const ids = [id || removeIds.value].join(",");
  if (!ids) {
    ElMessage.warning("请勾选删除项");
    return;
  }

  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    () => {
      loading.value = true;
      TopicArticleAPI.deleteByIds(ids)
        .then(() => {
          ElMessage.success("删除成功");
          handleQuery();
          articleId.value = 0;
          articleTitle.value = "";
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

function handleTcmQuery(id: number, title: string) {
  articleId.value = id;
  articleTitle.value = title;
}

onMounted(() => {
  // console.log("topic_article mounted");
  handleQuery();
});
</script>
